<template>
  <view class="container">
	  <view class="nav-bar-title">我的</view>
    <view class="user-card" @click="navigateTo()">
      <view class="user-avatar-wrapper">
       <!-- <image 
          class="user-avatar" 
          :src="userInfo.avatar || '/static/images/avatar.jpg'" 
          mode="aspectFill"
        /> -->
		<image
		  class="user-avatar" 
		 src="/static/images/avatar.jpg"
		/>
      </view>
      <view class="user-info">
        <!-- <text class="nickname">{{userInfo.nickname || '未设置昵称'}}</text> -->
		<text class="nickname">未设置昵称</text>
		<text class="phone-number">13082122803</text>
      </view>
    </view>
    <view class="func-list">
      <!-- <view 
        class="list-item" 
        @click="navigateTo()"
      >
        <view class="item-left">
          <view class="icon-wrapper">
			  <image src="/static/images/修改个人信息.png" mode=""></image>
          </view>
          <text class="item-title">修改个人信息</text>
        </view>
        <uni-icons type="right" color="#ccc" size="18"></uni-icons>
      </view> -->
	  
	  <view class="list-item">
	    <view class="item-left">
	      <view class="icon-wrapper">
			  <image src="/static/images/修改个人信息.png" mode=""></image>
	      </view>
	      <text class="item-title">关于我们</text>
	    </view>
	  </view>
	  
	  <view class="list-item">
	    <view class="item-left">
	      <view class="icon-wrapper">
			  <image src="/static/images/修改个人信息.png" mode=""></image>
	      </view>
	      <text class="item-title">使用说明</text>
	    </view>
	  </view>
	  
    </view>
	<view class="SignOut">
		<button class="btn" type="default"  @click="postSignOut">退出登录</button>
	</view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { postLogOut } from '@/api/common.js';
// wwww
const userInfo = ref({
  avatar: '',
  nickname: ''
});

// 加载用户信息
const loadUserInfo = () => {
  const storedUserInfo = uni.getStorageSync('userInfo');
  userInfo.value = storedUserInfo || {
    avatar: '',
    nickname: '未设置昵称'
  };
  // console.log('当前用户信息:', userInfo.value);
};

// 退出登录
const postSignOut = () => {
	const userInfo = uni.getStorageSync('userInfo') || {};
	const userId = userInfo.id
	console.log('11',userId);
	  // 2. 校验必填参数（如 userId 不可为空）
	  if (!userId) {
	    uni.showToast({
	      title: '用户信息异常，请重新登录',
	      icon: 'none',
	      duration: 2000
	    });
	    return;
	  }
	
	
	  // 4. 显示加载提示
	  uni.showLoading({
	    title: '退出中...',
	    mask: true
	  });
	  //调用退出登录接口
	  postLogOut(userId)
	    .then((res) => {
	      console.log('退出登录响应:', res);
	      
	      if (res.code === 200) {
	        // 清除本地存储
	        uni.removeStorageSync('userInfo');
	        uni.removeStorageSync('token'); // 如有 token 需一并清除
	        
	        // 跳转至登录页
	        uni.reLaunch({
	          url: '/pages/login/login',
	          success: () => {
	            uni.hideLoading(); // 隐藏加载提示
	          }
	        });
	      } else {
	        // 退出失败提示
	        uni.showToast({
	          title: res.message || '退出失败，请重试',
	          icon: 'none',
	          duration: 2000
	        });
	        uni.hideLoading();
	      }
	    })
	    .catch((error) => {
	      console.error('网络请求失败:', error);
	      uni.showToast({
	        title: '网络连接失败，请检查网络',
	        icon: 'none',
	        duration: 2000
	      });
	      uni.hideLoading();
	    });
	};

onLoad(() => {
  loadUserInfo();
});

onShow(() => {
  loadUserInfo();
});

// 跳转修改页面
const navigateTo = () => {
  uni.navigateTo({
    url: '/pages/revise_user_info/revise_user_info'
  });
};
</script>


<style lang="scss" scoped>
.container {
  background: #f4f8fc;
  // min-height: 100vh;
  // padding: 30rpx 0;
  padding: 100rpx 0;
}
.nav-bar-title{
	display: inline-block;
	font-size: 38rpx;
	margin-bottom: 20rpx;
	margin-left: 20rpx;
}
.user-card {
	display: flex;
	align-items: center;
	padding: 30rpx 20rpx;
	background-color: #ffffff;
	// border-radius: 32rpx;
	height: 120rpx;
  

  .user-avatar-wrapper {
    // position: relative;
    width: 120rpx;
    height: 120rpx;
    overflow: hidden;

    .user-avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

  }

  .user-info {
	  margin-left: 20rpx;
    .nickname {
      display: block;
      font-size: 35rpx;
      font-weight: 500;
	  color: #333333;
      margin-bottom: 10rpx;
	  
    }
	.phone-number{
		color: #666666;
	}
  }
}

.func-list {
  border-radius: 24rpx;
  overflow: hidden;
  padding: 0 32rpx;

  .list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
	border-radius: 16rpx;
    padding: 32rpx 40rpx;
	background-color: #ffffff;
	margin: 20rpx 0;
    .item-left {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .icon-wrapper {
      width: 64rpx;
      height: 64rpx;
      border-radius: 16rpx;
      margin-right: 24rpx;
	  image{
		  width: 64rpx;
		  height: 64rpx;
	  }
    }

    .item-title {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

.SignOut{
	position: fixed;
	  bottom: 100rpx;
	  left: 0;
	  right: 0;
	  margin: 0;
	  padding: 30rpx;
	  box-sizing: border-box;
	  .btn{
		  height: 100rpx;
		  line-height: 100rpx;
	  }
}
</style>